<template>
  <view class="container">
    <!-- 今日告警总数统计 -->
    <view class="statistics-section">
      <text class="section-title">今日告警总数统计</text>
      <view class="progress-bar">
        <view
          class="progress-item handled"
          :style="{ width: handledPercentage + '%' }"
          @click="showHandledAlerts"
        >
          <text class="progress-label">已处理 {{ handledAlerts }}</text>
        </view>
        <view
          class="progress-item unhandled"
          :style="{ width: unhandledPercentage + '%' }"
          @click="showUnhandledAlerts"
        >
          <text class="progress-label">未处理 {{ unhandledAlerts }}</text>
        </view>
      </view>
      <view class="alert-types">
        <view
          class="alert-type"
          v-for="(count, type) in alertTypes"
          :key="type"
          @click="showAlertDetails(type)"
        >
          <text class="alert-type-label">{{ type }}</text>
          <text class="alert-type-count">{{ count }}</text>
        </view>
      </view>
    </view>

    <!-- 人员实时情况统计 -->
    <view class="statistics-section">
      <text class="section-title">人员实时情况统计</text>
      <view class="statistics-row">
        <button 
          class="stat-item online" 
          @click="showOnlinePersonnel"
          plain
        >
          <text class="stat-number">{{ onlinePersonnel }}</text>
          <text class="stat-label">在线人数</text>
        </button>
        <button 
          class="stat-item offline" 
          @click="showOfflinePersonnel"
          plain
        >
          <text class="stat-number">{{ offlinePersonnel }}</text>
          <text class="stat-label">离线人数</text>
        </button>
      </view>
      <view class="personnel-types">
        <view
          class="personnel-type"
          v-for="(count, type) in personnelTypes"
          :key="type"
          @click="showPersonnelByType(type)"
        >
          <text class="personnel-type-label">{{ type }}</text>
          <text class="personnel-type-count">{{ count }}</text>
        </view>
      </view>
    </view>

    <!-- 部门人员统计 -->
    <view class="statistics-section">
      <text class="section-title">部门人员统计</text>
      <view class="department-types">
        <view
          class="department-type"
          v-for="(count, department) in departmentPersonnel"
          :key="department"
          @click="showDepartmentPersonnel(department)"
        >
          <text class="department-type-label">{{ department }}</text>
          <text class="department-type-count">{{ count }}</text>
        </view>
      </view>
    </view>

    <!-- 弹窗 -->
    <view v-if="showModal" class="modal-overlay" @click="closeModal">
      <view class="modal-content" @click.stop>
        <u-icon
          type="close"
          size="24"
          class="close-icon"
          @click="closeModal"
        ></u-icon>
        <text class="modal-title">{{ modalTitle }}</text>
        <view class="modal-table">
          <view class="modal-table-header">
            <text class="modal-table-cell" v-if="isPersonnelModal">姓名</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">职务</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">电话号码</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">所处诊室</text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">事件时间</text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">事件类型</text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">事件地点</text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">事件视频</text>
          </view>
          <view
            v-for="item in paginatedData"
            :key="item.id"
            class="modal-table-row"
          >
            <text class="modal-table-cell" v-if="isPersonnelModal">{{ item.name }}</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">{{ item.position }}</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">{{ item.phone }}</text>
            <text class="modal-table-cell" v-if="isPersonnelModal">{{ item.room }}</text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">
              {{ item.time }}
            </text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">
              {{ item.type }}
            </text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">
              {{ item.location }}
            </text>
            <text class="modal-table-cell" v-if="!isPersonnelModal">
              <u-button
                type="primary"
                @click="playVideo(item.videoUrl)"
                class="video-button"
                >播放视频</u-button
              >
            </text>
          </view>
        </view>
        <view class="pagination">
          <u-button
            @click="prevPage"
            :disabled="currentPage === 1"
            type="default"
            >上一页</u-button
          >
          <text>{{ currentPage }} / {{ totalPages }}</text>
          <u-button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            type="default"
            >下一页</u-button
          >
        </view>
      </view>
    </view>

    <!-- 视频播放 -->
    <view v-if="showVideo" class="video-overlay" @click="closeVideo">
      <video
        class="video-player"
        :src="currentVideoUrl"
        controls
        autoplay
        @click.stop
      ></video>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalPersonnel: 100,
      onlinePersonnel: 80,
      offlinePersonnel: 20,
      totalAlerts: 50,
      handledAlerts: 30,
      unhandledAlerts: 20,
      alertTypes: {
        一键告警: 10,
        缺员告警: 15,
        静止告警: 5,
        视频AI报警: 20,
      },
      personnelTypes: {
        总人数: 100,
        员工: 60,
        访客: 20,
        第三方人员: 10,
        车辆: 5,
        外来人员: 5,
      },
      departmentPersonnel: {
        内科: 10,
        外科: 15,
        神经科: 5,
        急诊: 20,
        儿科: 10,
      },
      onlinePersonnelList: [
        { name: "张三", position: "主治医师", phone: "13800138001", room: "内科诊室1" },
        { name: "李四", position: "护士长", phone: "13800138002", room: "外科诊室2" },
        { name: "王五", position: "主任医师", phone: "13800138003", room: "神经科诊室1" },
        { name: "赵六", position: "主治医师", phone: "13800138004", room: "内科诊室2" },
        { name: "钱七", position: "护士", phone: "13800138005", room: "外科诊室1" },
        { name: "刘八", position: "实习医生", phone: "13800138006", room: "神经科诊室2" },
        { name: "周九", position: "主治医师", phone: "13800138007", room: "内科诊室3" },
        { name: "吴十", position: "护士", phone: "13800138008", room: "外科诊室2" },
        { name: "郑十一", position: "主任医师", phone: "13800138009", room: "神经科诊室3" },
        { name: "王十二", position: "主治医师", phone: "13800138010", room: "急诊室1" },
        { name: "冯十三", position: "实习医生", phone: "13800138011", room: "儿科诊室2" },
        { name: "陈十四", position: "护士", phone: "13800138012", room: "外科诊室3" },
        { name: "蒋十五", position: "主医师", phone: "13800138013", room: "内科诊室4" },
        { name: "沈十六", position: "护士", phone: "13800138014", room: "外科诊室4" },
        { name: "韩十七", position: "主任医师", phone: "13800138015", room: "神经科诊室5" },
        { name: "杨十八", position: "主治医师", phone: "13800138016", room: "急诊室2" },
        { name: "朱十九", position: "实习医生", phone: "13800138017", room: "儿科诊室3" },
        { name: "秦二十", position: "护士", phone: "13800138018", room: "外科诊室5" },
        { name: "尤二一", position: "主治医师", phone: "13800138019", room: "内科诊室6" },
        { name: "许二二", position: "护士", phone: "13800138020", room: "外科诊室6" },
        { name: "何二三", position: "主任医师", phone: "13800138021", room: "神经科诊室7" },
        { name: "吕二四", position: "主治医师", phone: "13800138022", room: "急诊室3" },
        { name: "施二五", position: "实习医生", phone: "13800138023", room: "儿科诊室4" },
        { name: "张二六", position: "护士", phone: "13800138024", room: "外科诊室7" },
        { name: "孔二七", position: "主治医师", phone: "13800138025", room: "内科诊室8" },
        { name: "曹二八", position: "护士", phone: "13800138026", room: "外科诊室8" },
        { name: "严二九", position: "主任医师", phone: "13800138027", room: "神经科诊室9" },
        { name: "华三十", position: "主治医师", phone: "13800138028", room: "急诊室4" },
        { name: "金三一", position: "实习医生", phone: "13800138029", room: "儿科诊室5" },
        { name: "魏三二", position: "护士", phone: "13800138030", room: "外科诊室9" },
      ],
      offlinePersonnelList: [
        { name: "陈六", position: "主任医师", phone: "13800138004", room: "儿科诊室1" },
        { name: "孙七", position: "护士", phone: "13800138005", room: "急诊室1" },
        { name: "钱八", position: "实习医生", phone: "13800138006", room: "内科诊室2" },
        { name: "孙九", position: "护士", phone: "13800138007", room: "外科诊室3" },
        { name: "周十", position: "实习医生", phone: "13800138008", room: "神经科诊室4" },
        { name: "吴十一", position: "护士", phone: "13800138009", room: "急诊室2" },
        { name: "郑十二", position: "实习生", phone: "13800138010", room: "儿科诊室3" },
        { name: "王十三", position: "护士", phone: "13800138011", room: "外科诊室4" },
        { name: "冯十四", position: "实习医生", phone: "13800138012", room: "神经科诊室5" },
        { name: "陈十五", position: "护士", phone: "13800138013", room: "急诊室3" },
        { name: "赵十六", position: "实习医生", phone: "13800138014", room: "儿科诊室4" },
        { name: "钱十七", position: "护士", phone: "13800138015", room: "外科诊室5" },
        { name: "孙十八", position: "实习医生", phone: "13800138016", room: "神经科诊室6" },
        { name: "周十九", position: "护士", phone: "13800138017", room: "急诊室4" },
        { name: "吴二十", position: "实习医生", phone: "13800138018", room: "儿科诊室5" },
        { name: "郑二十一", position: "护士", phone: "13800138019", room: "外科诊室6" },
        { name: "王二十二", position: "实习医生", phone: "13800138020", room: "神经科诊室7" },
        { name: "冯二十三", position: "护士", phone: "13800138021", room: "急诊室5" },
        { name: "陈二十四", position: "实习医生", phone: "13800138022", room: "儿科诊室6" },
        { name: "赵二十五", position: "护士", phone: "13800138023", room: "外科诊室7" },
        { name: "钱二十六", position: "实习医生", phone: "13800138024", room: "神经科诊室8" },
        { name: "孙二十七", position: "护士", phone: "13800138025", room: "急诊室6" },
        { name: "周二十八", position: "实习医生", phone: "13800138026", room: "儿科诊室7" },
        { name: "吴二十九", position: "护士", phone: "13800138027", room: "外科诊室8" },
        { name: "郑三十", position: "实习医生", phone: "13800138028", room: "神经科诊室9" },
        { name: "王三十一", position: "护士", phone: "13800138029", room: "急诊室7" },
        { name: "冯三十二", position: "实习医生", phone: "13800138030", room: "儿科诊室8" },
      ],
      alertDetailsList: [
        {
          time: "2023-10-01 10:00",
          type: "一键告警",
          location: "内科",
          video: "视频1",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 11:00",
          type: "缺员告警",
          location: "外科",
          video: "视频2",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 12:00",
          type: "静止告警",
          location: "神经科",
          video: "视频3",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 13:00",
          type: "视频AI报警",
          location: "急诊",
          video: "视频4",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 14:00",
          type: "一键告警",
          location: "儿科",
          video: "视频5",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 15:00",
          type: "缺员告警",
          location: "外科",
          video: "视频6",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 16:00",
          type: "静止告警",
          location: "内科",
          video: "视频7",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 17:00",
          type: "视频AI报警",
          location: "科",
          video: "视频8",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 18:00",
          type: "一键告警",
          location: "神经科",
          video: "视频9",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 19:00",
          type: "缺员告警",
          location: "急诊",
          video: "视频10",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 20:00",
          type: "静止告警",
          location: "儿科",
          video: "视频11",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 21:00",
          type: "视频AI报警",
          location: "外科",
          video: "视频12",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 22:00",
          type: "一键告警",
          location: "内科",
          video: "视频13",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-01 23:00",
          type: "缺员告警",
          location: "外科",
          video: "视频14",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 00:00",
          type: "静止告警",
          location: "神经科",
          video: "视频15",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 01:00",
          type: "视频AI报警",
          location: "急诊",
          video: "视频16",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 02:00",
          type: "一键告警",
          location: "儿科",
          video: "视频17",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 03:00",
          type: "缺员告警",
          location: "外科",
          video: "视频18",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 04:00",
          type: "静止告警",
          location: "内科",
          video: "视频19",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 05:00",
          type: "视频AI报警",
          location: "外科",
          video: "视频20",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 06:00",
          type: "一键告警",
          location: "神经科",
          video: "视频21",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 07:00",
          type: "缺员告警",
          location: "急诊",
          video: "视频22",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 08:00",
          type: "静止告警",
          location: "儿科",
          video: "视频23",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 09:00",
          type: "视频AI报警",
          location: "外科",
          video: "视频24",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 10:00",
          type: "一键告警",
          location: "内科",
          video: "视频25",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 11:00",
          type: "缺员告警",
          location: "外科",
          video: "视频26",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 12:00",
          type: "静止告警",
          location: "神经科",
          video: "视频27",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 13:00",
          type: "视频AI报警",
          location: "急诊",
          video: "视频28",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 14:00",
          type: "一键告",
          location: "儿科",
          video: "视���29",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
        {
          time: "2023-10-02 15:00",
          type: "缺员告警",
          location: "外科",
          video: "视频30",
          videoUrl: "http://47.94.229.196:90/diedao.MP4",
        },
      ],
      showModal: false,
      showVideo: false,
      modalTitle: "",
      modalData: [],
      currentVideoUrl: "",
      currentPage: 1,
      itemsPerPage: 10, // 每页显示10个数据
      isPersonnelModal: true, // 用于区分人员和告警弹窗
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.modalData.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.modalData.slice(start, start + this.itemsPerPage);
    },
    handledPercentage() {
      return (this.handledAlerts / this.totalAlerts) * 100;
    },
    unhandledPercentage() {
      return (this.unhandledAlerts / this.totalAlerts) * 100;
    },
    onlinePercentage() {
      return (this.onlinePersonnel / this.totalPersonnel) * 100;
    },
    offlinePercentage() {
      return (this.offlinePersonnel / this.totalPersonnel) * 100;
    },
  },
  methods: {
    showOnlinePersonnel() {
      this.modalTitle = "在线人员详情";
      this.modalData = this.onlinePersonnelList;
      this.currentPage = 1; // 重置当前页
      this.isPersonnelModal = true;
      this.showModal = true;
    },
    showOfflinePersonnel() {
      this.modalTitle = "离线人员详情";
      this.modalData = this.offlinePersonnelList;
      this.currentPage = 1; // 重置当前页
      this.isPersonnelModal = true;
      this.showModal = true;
    },
    showHandledAlerts() {
      this.modalTitle = "已处理告警详情";
      this.modalData = this.alertDetailsList;
      this.currentPage = 1; // 重置当前页
      this.isPersonnelModal = false;
      this.showModal = true;
    },
    showUnhandledAlerts() {
      this.modalTitle = "未处理告警详情";
      this.modalData = this.alertDetailsList;
      this.currentPage = 1; // 重置当前页
      this.isPersonnelModal = false;
      this.showModal = true;
    },
    playVideo(videoUrl) {
      this.currentVideoUrl = videoUrl;
      this.showVideo = true;
    },
    closeVideo() {
      this.showVideo = false;
      this.currentVideoUrl = "";
    },
    closeModal() {
      this.showModal = false;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    showAlertDetails(type) {
      this.modalTitle = `${type}详情`;
      this.modalData = this.alertDetailsList.filter(alert => alert.type === type);
      this.currentPage = 1;
      this.isPersonnelModal = false;
      this.showModal = true;
    },
    showDepartmentPersonnel(department) {
      this.modalTitle = `${department}人员列表`;
      const allPersonnel = [...this.onlinePersonnelList, ...this.offlinePersonnelList];
      this.modalData = allPersonnel.filter(person => person.room.includes(department));
      this.currentPage = 1;
      this.isPersonnelModal = true;
      this.showModal = true;
    },
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.error('拨打电话失败', err);
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          });
        }
      });
    },
    showPersonnelByType(type) {
      if (type === '员工') {
        this.modalTitle = "员工列表";
        this.modalData = [...this.onlinePersonnelList];
        this.currentPage = 1;
        this.isPersonnelModal = true;
        this.showModal = true;
      } else {
        uni.showToast({
          title: `${type}列表暂未开放`,
          icon: 'none',
          duration: 2000
        });
      }
    }
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 15rpx;
  box-sizing: border-box;
  background-color: #E0FFFF;
  overflow-y: auto; /* 改为可滚动 */
}

.statistics-section {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(41, 128, 185, 0.15);
  border: 1px solid rgba(41, 128, 185, 0.1);
  min-height: auto; /* 移除固定高度比例 */
}

/* 移除之前的固定比例设置 */
.statistics-section:nth-child(1),
.statistics-section:nth-child(2),
.statistics-section:nth-child(3) {
  flex: none; /* 移除固定比例 */
}

/* 调整内部滚动 */
.alert-types,
.personnel-types,
.department-types {
  overflow-y: visible; /* 改为可见 */
  padding-right: 10rpx;
}

/* 最后一个section的底部间距 */
.statistics-section:last-child {
  margin-bottom: 20rpx; /* 添加底部间距 */
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
  color: #2980B9;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -5rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 3rpx;
  background-color: #2980B9;
  border-radius: 2rpx;
}

.progress-bar {
  display: flex;
  width: 100%;
  height: 35rpx;
  background-color: rgba(41, 128, 185, 0.1);
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.progress-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.handled {
  background-color: #7FFFD4;
}

.unhandled {
  background-color: #FFD700;
}

.statistics-row {
  display: flex;
  justify-content: space-between;
  margin: 15rpx 0;
  flex-wrap: nowrap;
  gap: 20rpx;
}

.stat-item {
  flex: 1;
  height: 90rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  border-radius: 12rpx !important;
  padding: 12rpx !important;
  box-shadow: 0 4px 12px rgba(41, 128, 185, 0.1);
  border: 1px solid rgba(41, 128, 185, 0.1) !important;
  transition: all 0.3s ease;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-weight: normal !important;
}

/* 在线人数按钮样式 */
.stat-item.online {
  background-color: rgba(127, 255, 212, 0.1) !important;
  border-color: #7FFFD4 !important;
}

/* 离线人数按钮样式 */
.stat-item.offline {
  background-color: rgba(255, 215, 0, 0.1) !important;
  border-color: #FFD700 !important;
}

.stat-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.stat-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #2980B9;
  line-height: 1.2;
}

.stat-label {
  font-size: 24rpx;
  color: #2980B9;
  margin-top: 4rpx;
  line-height: 1.2;
}

.alert-type,
.personnel-type,
.department-type {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 10rpx 15rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(41, 128, 185, 0.08);
  border: 1px solid rgba(41, 128, 185, 0.1);
  transition: transform 0.3s ease;
}

.alert-type:active,
.personnel-type:active,
.department-type:active {
  transform: translateX(5rpx);
}

.alert-type-label,
.personnel-type-label,
.department-type-label {
  font-size: 24rpx;
  color: #2980B9;
}

.alert-type-count,
.personnel-type-count,
.department-type-count {
  font-size: 26rpx;
  font-weight: bold;
  color: #2980B9;
  background-color: rgba(127, 255, 212, 0.2);
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}

.modal-content {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 15rpx;
  width: 85%;
  box-shadow: 0 4px 20px rgba(41, 128, 185, 0.2);
}

.modal-table-header {
  background-color: rgba(41, 128, 185, 0.1);
  padding: 15rpx 0;
  border-radius: 8rpx;
}

.modal-table-cell {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #2980B9;
  padding: 12rpx 8rpx;
}

.video-button {
  background-color: #2980B9;
  color: #ffffff;
  border-radius: 25rpx;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.modal-table-cell.phone {
  color: #2980B9;
  text-decoration: underline;
}

.modal-table-row:hover {
  background-color: rgba(127, 255, 212, 0.1);
}

.department-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 改为两列布局 */
  gap: 10rpx;
  padding: 5rpx;
}

.department-type {
  width: auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 12rpx 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(41, 128, 185, 0.08);
  border: 1px solid rgba(41, 128, 185, 0.1);
  transition: all 0.3s ease;
}

.department-type-label {
  font-size: 26rpx;
  color: #2980B9;
  font-weight: 500;
}

.department-type-count {
  font-size: 28rpx;
  font-weight: bold;
  color: #2980B9;
  background-color: rgba(127, 255, 212, 0.2);
  padding: 4rpx 15rpx;
  border-radius: 15rpx;
  min-width: 60rpx;
  text-align: center;
}

/* 调整hover效果 */
.department-type:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4px 12px rgba(41, 128, 185, 0.12);
  background-color: rgba(127, 255, 212, 0.05);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  width: 80%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.close-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  color: #999;
  cursor: pointer;
}

.modal-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
  text-align: center;
}

.modal-table {
  width: 100%;
  margin-bottom: 20rpx;
}

.modal-table-header,
.modal-table-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
  align-items: center; /* 添加垂直居中对齐 */
}

.modal-table-cell {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #555;
  padding: 0 5rpx; /* 添加左右内边距 */
  display: flex; /* 添加flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  min-width: 0; /* 防止内容溢出 */
}

.video-button {
  margin: 0;
  padding: 4rpx 12rpx !important; /* 减小内边距 */
  font-size: 24rpx !important; /* 稍微减小字体 */
  white-space: nowrap; /* 防止文字换行 */
  min-width: 120rpx; /* 设置最小宽度 */
  height: 50rpx !important; /* 设置固定高度 */
  line-height: 50rpx !important; /* 行高等于高度实现垂直居中 */
}

/* 为最后一列（视频按钮列）设置固定宽度 */
.modal-table-cell:last-child {
  flex: 0 0 140rpx; /* 不伸缩，固定宽度 */
  width: 140rpx;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.video-player {
  width: 80%;
  height: 45%;
  background-color: #000;
}

/* 在 style 中添加电话号码的样式 */
.modal-table-cell.phone {
  color: #007AFF;
  text-decoration: underline;
}

/* 覆盖 u-button 的默认样式 */
.statistics-row .u-button {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.statistics-row .u-button::after {
  border: none !important;
}
</style>
















